<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->

<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>Shopping cart | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/js/project/user/shop/shoppingCart/css/bootstrap.min.css" rel="stylesheet">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <link href="../layui/css/layui.css" rel="stylesheet">
    <style>
        .shopping-cart-data td, .checkout-page td {
            vertical-align: top;
            padding: 10px 20px 20px 0;
            border-bottom: solid 1px #ecebeb;
        }
    </style>
</head>
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div id="wrapper">
    <!-- BEGIN TOP BAR -->
    <div th:include="common/userShopHead :: head"></div>
    <!-- END TOP BAR -->
    <div th:include="common/userShopHead :: head-navigation"></div>
    <!-- BEGIN HEADER -->
    <!--  <div th:include="common/userShopHead :: head-navigation"></div>-->
    <!-- END HEADER -->


    <div class="main">
        <div class="container" style="padding:0 0 0 0 ;">
            <div style="background-color: #ececec;height: 50px;margin-bottom: 10px;"><p style="padding-top: 15px;padding-left: 10px;
       color: #767f88;font-weight: 900;">订单详情:</p>
            </div>
        </div>
        <div class="container" style="border: 1px solid #eaeaea; padding: 30px 0 30px 0;">
            <!-- BEGIN SIDEBAR & CONTENT -->
            <div class="row margin-bottom-40">
                <!-- BEGIN CONTENT -->


                <form class="form-horizontal" id="myForm" style="padding: 10px 10% 10px 0;">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">收件人</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="addressee" v-model="addressee" id="addressee"
                                   placeholder="用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">手机</div>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="phone" placeholder="手机" v-model="phone"
                                   id="phone"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-2 control-label">收货地址</div>
                        <div class="col-sm-10">
                          <textarea type="text" class="form-control"
                                    name="shopExplain"
                                    v-model="deliveryAddr" placeholder="收货地址" id="deliveryAddr"></textarea>
                        </div>
                    </div>
                </form>

                <!--
                <div class="form-group">
                    <h3 style="margin-bottom:0.1cm">收货地址</h3>
                    <div class="" style="margin-bottom:0.5cm">
                        <input required type="text" class="form-control" placeholder="收货地址" name="delivery_addr"
                               v-model="delivery_addr"/>
                    </div>
                </div>
                <h2 style="margin-bottom:0.2cm">确认订单信息</h2>
                -->
            </div>

            <div class="col-md-12 col-sm-12">


                <div class="shopping-cart-page">
                    <div class="shopping-cart-data clearfix">
                        <div class="table-wrapper-responsive">

                            <table summary="Shopping cart111">
                                <tr>
                                    <th class="shopping-cart-image">图片</th>
                                    <th class="shopping-cart-description" style=" text-align:center; ">商品名字</th>
                                    <th class="shopping-cart-quantity">数量</th>
                                    <th class="shopping-cart-price">单价</th>
                                    <th class="shopping-cart-total" colspan="2">总价</th>
                                </tr>
                                <!--th:each=${shopList['orderDetail']}-->
                                <!--对象名.user[0].name这样子-->
                                <!--<tr th:each="shopList.orderDetail[0]">-->
                                <tr v-for="item in shopList">
                                    <td class="shopping-cart-image">
                                        <a href="#"><img
                                                :src="item.pageaddr+item.saveFileName"
                                                alt="Berry Lace Dress"></a>
                                    </td>
                                    <td class="shopping-cart-description"
                                        style=" text-align:center;padding: 30px 0 0 0; ">

                                        <span v-text='item.name+" "+ item.fileName'
                                              v-if="item.name != item.fileName"></span>
                                        <span v-text='item.name' v-if="item.name == item.fileName"></span>
                                    </td>

                                    <td class="shopping-cart-quantity" style="padding: 20px 0 0 0;">

                                        <div class="product-quantity">
                                            <input :id='"product-quantity"+item.shopId' :value="item.cartNum"
                                                   type="text"
                                                   readonly
                                                   class="form-control input-sm" ref="input1" name="text">
                                        </div>
                                    </td>
                                    <td class="shopping-cart-price" style="padding: 25px 0 0 0;">
                                        <strong><span v-text="item.pirce">¥</span></strong>
                                    </td>
                                    <td class="shopping-cart-total" style="padding: 25px 0 0 0;">
                                        <strong><span v-text="item.amount">¥</span></strong>
                                    </td>
                                    <td class="del-goods-col">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="shopping-total">
                            <!--<tr th:each="com_list:${shopList['orderDetail']}">-->
                            <ul>
                                <li>
                                    <em>小计</em>
                                    <strong><span id="xiaoji" v-text='"¥"+subtotal'></span></strong>
                                    <!--<strong class="price"><span>¥</span>{{shopList.allPrices}}</strong>-->
                                </li>
                                <li>
                                    <em>运费</em>
                                    <strong class="price"><span v-text='"¥"+freight'></span></strong>
                                </li>
                                <li class="shopping-total-price">
                                    <em>总计</em>
                                    <strong><span v-text='"¥"+total'></span></strong>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--th:id="${shopList.bigOrderCode+','+shopList.allPrices}"-->
                    <a class="btn btn-primary" type="submit" @click="re()" ref="myelement"
                    >返回订单列表
                    </a>
                    <a class="btn btn-primary" type="submit" @click="update()" ref="myelement"
                       style="margin-right: 20px;" id="upda"
                    >修改
                    </a>
                </div>
            </div>
            <!-- END CONTENT -->
        </div>

    </div>
</div>
<div th:include="common/Head :: brands"></div>
</div>
<!-- END fast view of a product -->
<script src="../layui/layui.js"></script>

<!-- Load javascripts at bottom, this will reduce page load time -->
<!-- BEGIN CORE PLUGINS (REQUIRED FOR ALL PAGES) -->
<!--[if lt IE 9]>
<script src="../bootstrap/user/plugins/respond.min.js"></script>
<![endif]-->
<script src="../bootstrap/user/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/back-to-top.js"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/jQuery-slimScroll/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL JAVASCRIPTS (REQUIRED ONLY FOR CURRENT PAGE) -->
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
<script type="text/javascript" src="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.pack.js"></script>
<!-- pop up -->
<script type="text/javascript" src="../bootstrap/user/plugins/bxslider/jquery.bxslider.min.js"></script>
<!-- slider for products -->
<script type="text/javascript" src='../bootstrap/user/plugins/zoom/jquery.zoom.min.js'></script><!-- product zoom -->
<script src="../bootstrap/user/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>
<script src="../bootstrap/user/plugins/layerslider/js/layerslider.kreaturamedia.jquery.js"
        type="text/javascript"></script>

<!-- Quantity -->


<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/project/search.js"></script>
<script src="../js/shoppingOrder/js/shoppingPurchaseDetail.js"></script>
<script type="text/javascript" th:inline="javascript">
    var layer;

    $(document).ready(function () {

        $('.brands').css("display", "none");
        layui.use("layer", function () {
            layer = layui.layer;  //layer初始化
        })
        var data = [[${shopList}]];
        var order = [[${order}]];

        if (order.actionType == 1) {
            $("#addressee").attr('readonly', true);
            $("#phone").attr('readonly', true);
            $("#deliveryAddr").attr('readonly', true);
            $("#upda").css('display', 'none');
        }

        var orderList = (order.num.substring(0, order.num.length - 1)).split(",").sort()
        var shopIdList = (order.shopId.substring(0, order.shopId.length - 1)).split(",").sort()
        vm.deliveryAddr = order.deliveryAddr;
        vm.addressee = order.addressee;
        vm.phone = order.phone
        vm.id = order.id

        if (data != null) {
            var _this = this;
            var num = 0;
            var prices = 0;
            vm.shopList = [];
            for (var index in data) {

                if (shopIdList[index] == data[index].spId) {
                    num++;
                    data[index].cartNum = orderList[index]
                    data[index].amount = data[index].pirce * data[index].cartNum;
                    data[index].fileName = data[index].fileName.substring(0, data[index].fileName.indexOf("."))
                    prices += data[index].pirce * data[index].cartNum;


                    vm.shopList.push(data[index])
                }

            }
            vm.subtotal = prices;
            vm.total = prices + vm.freight;

            console.log(vm.shopList)


        }

    });

</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>